<script>
import {axiosGetPersonInfo} from "../api";

export default {
  name: "personMenu",
  data(){
    return{
      username:"",
    }
  },
  beforeMount() {
    this.getUserInfo();
  },
  methods: {
    switchPersonInfo() {
      this.$parent.$router.push({name: "personInfo"});
    },
    switchPersonPrivacy() {
      this.$parent.$router.push({name: "personPrivacy"});
    },
    switchPersonConfig() {
      this.$parent.$router.push({name: "personConfig"});
    },
    async getUserInfo() {
      if (this.isLogin) {
        let result = await axiosGetPersonInfo({account: this.account,password: this.password});
        if (result.status === 200) {
          this.username = result.data.userName;
        }
      }
    },
  }
}
</script>

<template>
  <div id="personMenu">
    <div class="middle-box">
      <div class="info">
        <img alt="" src="../img/QRcode.jpg" width="100">
        <p>昵称：</p>
        <p class="info-input" style="font-size: 12px">{{username}}</p>
        <p>账号：</p>
        <p class="info-input" style="font-size: 12px">{{this.account}}</p>
      </div>
      <div class="menu">
        <el-menu :default-openeds="['1', '1']">
          <el-menu-item index="1-1" @click="switchPersonInfo">用户信息</el-menu-item>
          <el-menu-item index="1-2" @click="switchPersonPrivacy">隐私设定</el-menu-item>
          <el-menu-item index="1-3" @click="switchPersonConfig">用户设置</el-menu-item>
        </el-menu>
      </div>
    </div>
  </div>
</template>

<style scoped src="../style/person-menu.css">

</style>